<template>
	<view>
		<view class="fixed inset-0" style="z-index: -1">
			<image class="h-full w-full" mode="aspectFill" src="/static/login/bg.png" />
		</view>
		<view class="text-center" style="padding-top: 120rpx">
			<logo />
		</view>
		<view class="fixed inset-x-0 bottom-0 z-10" style="padding-bottom: 200rpx">
			<view class="text-center mb-3-1">
				<image src="/static/login/tip.png" style="width: 483rpx" mode="widthFix" />
			</view>
			<button
				class="py-2-2 text-center mb-4-2 rounded-l bottom-shadow mx-3-1 login-btn text-xxxxl font-semibold"
				style="background-color: #246a49; color: #fdf6e5"
				@getphonenumber="getPhoneNumber"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="50"
				open-type="getPhoneNumber"
			>
				微信手机号快捷登录
			</button>
			<!-- <view
				class="py-2-2 text-center mb-3-1 rounded-l border mx-3-1"
				style="border-color: #246a49"
				@click="cellphoneCodeLogin"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="50"
			>
				<text class="text-xxxxl font-semibold color-main">手机验证码登录</text>
			</view> -->
			<view class="row-center content-center">
				<view @click="handleAgree" class="row-center">
					<text class="iconfont text-l mr-1 color-main" :class="[isAgree ? 'icon-gouxuan' : 'icon-weixuanze']"></text>
					<text class="text-xn color-main">阅读并同意四季嗨商城小程序</text>
				</view>
				<view @click="toAgreement(false)" hover-class="opacity-80" hover-start-time="0" hover-stay-time="50">
					<text class="text-xn color-main font-semibold">《用户协议》</text>
				</view>
				<view @click="toAgreement(true)" hover-class="opacity-80" hover-start-time="0" hover-stay-time="50">
					<text class="text-xn color-main font-semibold">《隐私政策》</text>
				</view>
			</view>
		</view>
		<select-community ref="selCommunityIns" @select="handleSelectCommunity" :isMaskClick="false"></select-community>
	</view>
</template>

<script>
import { onMounted, ref } from 'vue';
import { loginInter, bindPhone, getCommunityList } from '@/base/api/login.js';
import authCache from '@/uni-sdk/utils/authCache.js';

function parseJwt(token) {
	var base64Url = token.split('.')[1];
	var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
	// console.log(decode(base64));
	var jsonPayload = decodeURIComponent(
		encode(base64)
			.split('')
			.map(function (c) {
				return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
			})
			.join('')
	);
	return JSON.parse(jsonPayload);
}

export default {
	setup() {
		const selCommunityIns = ref();
		function cellphoneQuickLogin() {
			uni.switchTab({
				url: '/pages/home/first/first',
			});
		}
		function cellphoneCodeLogin() {
			uni.navigateTo({
				url: '/pages/login-captcha/login-captcha',
			});
		}
		function getPhoneNumber(phoneE) {
			uni.showLoading({
				mask: true,
				title: '加载中...',
			});
			uni.login({
				provider: 'weixin',
				scopes: 'auth_base',
				onlyAuthorize: true,
				async success(loginE) {
					uni.hideLoading();
					const loginRe = await loginInter({ code: loginE.code });
					if (loginRe) {
						authCache.setToken(loginRe.access_token);
						const re = await bindPhone({
							code: phoneE.detail.code,
						});
						if (re && re._isEmptyOrNull) {
							const community = authCache.getCommunity();
							if (community) {
								uni.switchTab({
									url: '/pages/home/first/first',
								});
							} else {
								selCommunityIns.value.open();
							}
						}
					}
				},
				fail(e) {
					console.log('handleLogin fail', e);
					uni.hideLoading();
				},
			});
		}
		function handleSelectCommunity() {
			uni.switchTab({
				url: '/pages/home/first/first',
			});
		}
		/**
		 * agreement
		 */
		const isAgree = ref(false);
		function toAgreement(isPrivate) {
			uni.navigateTo({
				url: '/pages/agreement/agreement?isPrivate=' + (isPrivate ? '1' : '0'),
			});
		}
		function handleAgree() {
			isAgree.value = !isAgree.value;
		}
		onMounted(async () => {
			if (authCache.getCommunity() && authCache.getToken()) {
				try {
					const info = await getMemberInfo({
						useGlobalLoading: true,
						useDefaultFailHandle: false,
						useDefaultErrHandle: false,
					});
					if(info) {
						uni.switchTab({
							url: '/pages/home/first/first',
						});
					}
				} catch (ex) {}
			}
		});
		return {
			cellphoneQuickLogin,
			cellphoneCodeLogin,
			isAgree,
			toAgreement,
			handleAgree,
			getPhoneNumber,
			selCommunityIns,
			handleSelectCommunity,
		};
	},
};
</script>

<style>
page {
	height: 100%;
}
.login-btn {
	line-height: 1;
	border-radius: 48rpx;
}
.login-btn::after {
	content: '';
	display: none;
}
</style>
